<template>
  <div class="resource-detail" v-if="resource">
    <div class="back-button">
      <el-button @click="router.back()" type="primary" plain>
        <el-icon><ArrowLeft /></el-icon>
        返回上一页
      </el-button>
    </div>

    <el-card>
      <template #header>
        <div class="card-header">
          <h2>{{ resource.name }}</h2>
          <el-tag :type="resource.status === 1 ? 'success' : 'info'">
            {{ resource.status === 1 ? '可借用' : '已借出' }}
          </el-tag>
        </div>
      </template>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-carousel height="400px" v-if="resource.resourceImageInfo?.length">
            <el-carousel-item v-for="image in resource.resourceImageInfo" :key="image.id">
              <img :src="image.imageUrl" class="resource-image">
            </el-carousel-item>
          </el-carousel>
        </el-col>
        
        <el-col :span="12">
          <div class="resource-info">
            <h3>资源信息</h3>
            <el-descriptions :column="1" border>
              <el-descriptions-item label="发布者">{{ resource.userInfo.username }}</el-descriptions-item>
              <el-descriptions-item label="位置">{{ resource.location }}</el-descriptions-item>
              <el-descriptions-item label="浏览次数">{{ resource.viewCount }}</el-descriptions-item>
              <el-descriptions-item label="借用次数">{{ resource.borrowCount }}</el-descriptions-item>
              <el-descriptions-item label="分类">{{ resource.resourceCategoryInfo?.name }}</el-descriptions-item>
            </el-descriptions>

            <div class="description-section">
              <h4>详细描述</h4>
              <p>{{ resource.description }}</p>
            </div>

            <div class="actions" v-if="resource.status === 1">
              <el-button type="primary" @click="showBorrowDialog">申请借用</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 借用对话框 -->
    <el-dialog v-model="borrowDialogVisible" title="借用申请" width="500px">
      <el-form :model="borrowForm" :rules="rules" ref="borrowFormRef" label-width="100px">
        <el-form-item label="预计归还时间" prop="expectedReturn">
          <el-date-picker
            v-model="borrowForm.expectedReturn"
            type="datetime"
            placeholder="选择日期时间"
            :disabled-date="disabledDate"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="借用说明" prop="description">
          <el-input
            v-model="borrowForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入借用说明"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="borrowDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleBorrow" :loading="borrowing">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useResourceStore } from '../stores/resource'
import { useBorrowStore } from '../stores/borrow'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'

const route = useRoute()
const router = useRouter()
const resourceStore = useResourceStore()
const borrowStore = useBorrowStore()

const resource = ref(null)
const borrowDialogVisible = ref(false)
const borrowing = ref(false)
const borrowFormRef = ref<FormInstance>()

const borrowForm = ref({
  resourceId: null as number | null,
  expectedReturn: '',
  description: ''
})

const rules = {
  expectedReturn: [
    { required: true, message: '请选择预计归还时间', trigger: 'change' }
  ],
  description: [
    { required: true, message: '请输入借用说明', trigger: 'blur' }
  ]
}

const loadResourceDetail = async () => {
  const id = Number(route.params.id)
  const detail = await resourceStore.getResourceDetail(id)
  if (detail) {
    resource.value = detail
  } else {
    ElMessage.error('获取资源详情失败')
    router.push('/home/resources')
  }
}

const showBorrowDialog = () => {
  borrowForm.value.resourceId = resource.value?.id || null
  borrowDialogVisible.value = true
}

const disabledDate = (time: Date) => {
  return time.getTime() < Date.now()
}

const handleBorrow = async () => {
  if (!borrowFormRef.value) return
  
  await borrowFormRef.value.validate(async (valid) => {
    if (valid) {
      borrowing.value = true
      try {
        const success = await borrowStore.borrowResource(borrowForm.value)
        if (success) {
          ElMessage.success('借用申请提交成功')
          borrowDialogVisible.value = false
          loadResourceDetail()
        }
      } finally {
        borrowing.value = false
      }
    }
  })
}

onMounted(() => {
  loadResourceDetail()
})
</script>

<style scoped>
.resource-detail {
  padding: 20px;
}

.back-button {
  margin-bottom: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
}

.resource-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.resource-info {
  padding: 20px;
}

.resource-info h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #303133;
}

.description-section {
  margin-top: 20px;
}

.description-section h4 {
  margin-bottom: 10px;
  color: #303133;
}

.description-section p {
  color: #606266;
  line-height: 1.6;
}

.actions {
  margin-top: 30px;
  text-align: center;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 